<template>
	<view class="wrapper">
		<view class="header">
			<view class="navigate">
				<view class="left">
					<uni-icons type="left" size="27" color="#262626" @click="navback"></uni-icons>
				</view>
				<view class="center">
					<view class="center-title-wrpper">
						<view class="title">委托交易</view>
						<view class="subtitle">鲁*67***488</view>
					</view>
					<view class="center-icon"><uni-icons type="down" size="20" color="#262626"></uni-icons></view>
				</view>
				<view class="right">
					<uni-icons type="search" size="25" color="#262626"></uni-icons>
				</view>
			</view>
		</view>
		<view class="center-warpper">
			<view class="ctype-wrapper">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ 'ctype-type-li': activeTabIndex === index }" @click="activeTabIndex = index">
					{{ tab }}
				</view>
				<!-- <view class="ctype-type-li active">买入</view>
				<view class="ctype-type-li">卖出</view>
				<view class="ctype-type-li">撤单</view>
				<view class="ctype-type-li">持仓</view>
				<view class="ctype-type-li">委托成交</view> -->
			</view>
			<view  v-if="activeTabIndex == 0">
				<view class="listtablist_A">
					<view class="lieft_list">
						<view  style="width: 100%; margin-top: 20rpx;float: left;height: 65rpx;" >
							<view class="bksx"></view>
							<view class="bksxa"></view>
						</view>
						<view style="width: 100%; margin-top: 20rpx; float: left;height: 65rpx;">
							<view class="bksx">限价</view>
							<view class="bksxa">
								<view style="float: left; border-right: 1rpx solid #EA0E00; text-align: center; width: 25%;">-</view>
								<input   style="float: left;  width: 48%;height: 100%;"/>
								<view style="float: left; border-left: 1rpx solid #EA0E00; text-align: center; width: 25%;">+</view>
							</view>
						</view>
						<view style="width: 100%; margin-top: 20rpx;float: left; height: 65rpx;">
							<view class="bksx"></view>
							<view class="bksxa">
								<view style="float: left; border-right: 1rpx solid #EA0E00; text-align: center; width: 25%;">-</view>
								<input   style="float: left;  width: 48%;height: 100%;"/>
								<view style="float: left; border-left: 1rpx solid #EA0E00; text-align: center; width: 25%;">+</view>
							</view>
						</view>
						<view style="width: 100%; height: 50rpx;float: left; margin-top: 20rpx;">
							<view style="width: 50%; text-align: left;line-height: 30rpx; font-size: 20rpx; float: left;">可买：</view>
							<view style="width: 50%; text-align: right;ine-height: 30rpx; font-size: 20rpx; float: left;">金额：</view>
						</view>
						<view  style="width: 98%; height: 50rpx;float: left; margin-top: 20rpx; border: 1rpx solid #ccc; border-radius: 5rpx; font-size: 24rpx;">
							<view style="width: 24%; height: 50rpx; border-right: 1rpx solid #ccc; float: left; text-align: center;line-height: 50rpx; ">1/4</view>
							<view style="width: 24%; height: 50rpx; border-right: 1rpx solid #ccc; float: left;  text-align: center;line-height: 50rpx;">1/3</view>
							<view style="width: 25%; height: 50rpx; border-right: 1rpx solid #ccc; float: left;  text-align: center;line-height: 50rpx;">1/2</view>
							<view style="width: 24%; height: 50rpx;  float: left;  text-align: center;line-height: 50rpx;">全仓</view>
						</view>
						<view style="width: 100%; height: 68rpx;background: #EA0E00;border-radius: 34rpx;  text-align: center;line-height: 68rpx; color:  #fff; float: left;margin-top: 20rpx;">买入</view>
					</view>
					<view class="lieft_right">
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖5</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖4</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖3</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖2</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖1</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<image src="../../static/xx.png" style="width: 90%; height: 5rpx; float: left; margin-top: 20rpx; margin-left: 5%;"></image>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买1</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买2</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买3</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买4</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买5</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
					</view>
				</view>
			</view>
			<view  v-if="activeTabIndex == 1">
				<view class="listtablist_A">
					<view class="lieft_list">
						<view  style="width: 100%; margin-top: 20rpx;float: left;height: 65rpx;" >
							<view class="bksxb"></view>
							<view class="bksxaa"></view>
						</view>
						<view style="width: 100%; margin-top: 20rpx; float: left;height: 65rpx;">
							<view class="bksxb">限价</view>
							<view class="bksxaa">
								<view style="float: left; border-right: 1rpx solid #08377D; text-align: center; width: 25%;">-</view>
								<input   style="float: left;  width: 48%;height: 100%;"/>
								<view style="float: left; border-left: 1rpx solid #08377D; text-align: center; width: 25%;">+</view>
							</view>
						</view>
						<view style="width: 100%; margin-top: 20rpx;float: left; height: 65rpx;">
							<view class="bksxb"></view>
							<view class="bksxaa">
								<view style="float: left; border-right: 1rpx solid #08377D; text-align: center; width: 25%;">-</view>
								<input   style="float: left;  width: 48%;height: 100%;"/>
								<view style="float: left; border-left: 1rpx solid #08377D; text-align: center; width: 25%;">+</view>
							</view>
						</view>
						<view style="width: 100%; height: 50rpx;float: left; margin-top: 20rpx;">
							<view style="width: 50%; text-align: left;line-height: 30rpx; font-size: 20rpx; float: left;">可买：</view>
							<view style="width: 50%; text-align: right;ine-height: 30rpx; font-size: 20rpx; float: left;">金额：</view>
						</view>
						<view  style="width: 98%; height: 50rpx;float: left; margin-top: 20rpx; border: 1rpx solid #ccc; border-radius: 5rpx; font-size: 24rpx;">
							<view style="width: 24%; height: 50rpx; border-right: 1rpx solid #ccc; float: left; text-align: center;line-height: 50rpx; ">1/4</view>
							<view style="width: 24%; height: 50rpx; border-right: 1rpx solid #ccc; float: left;  text-align: center;line-height: 50rpx;">1/3</view>
							<view style="width: 25%; height: 50rpx; border-right: 1rpx solid #ccc; float: left;  text-align: center;line-height: 50rpx;">1/2</view>
							<view style="width: 24%; height: 50rpx;  float: left;  text-align: center;line-height: 50rpx;">全仓</view>
						</view>
						<view style="width: 100%; height: 68rpx;background: #08377D;border-radius: 34rpx;  text-align: center;line-height: 68rpx; color:  #fff; float: left;margin-top: 20rpx;">卖出</view>
					</view>
					<view class="lieft_right">
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖5</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖4</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖3</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖2</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">卖1</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<image src="../../static/xx.png" style="width: 90%; height: 5rpx; float: left; margin-top: 20rpx; margin-left: 5%;"></image>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买1</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买2</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买3</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买4</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
						<view style="width: 100%; float: left; height: 30rpx; font-size: 24rpx;text-align:  center; margin-top: 20rpx;">
							<view style="width: 30%; float: left; height: 30rpx;">买5</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
							<view style="width: 30%; float: left; height: 30rpx;">--</view>
						</view>
					</view>
				</view>
			</view>
			<view  v-if="activeTabIndex == 2"></view>
			<view v-if="activeTabIndex == 4">
				<view class="center-warppera">
					
					<view class="type-list">
						<view class="type active">当日成交</view>
						<view class="type">当日成交</view>
						<view class="type">当日成交</view>
						<view class="type">当日成交</view>
					</view>
				</view>
				<view class="info-wrapper">
					<view class="title">
						<view class="title-title">京沪深</view>
						<view class="title-icon"></view>
					</view>
					<view class="action-wrapper">
						<view class="action-li">
							<view class="name">名称/时间</view>
						</view>
						<view class="action-li">
							<view class="name">委托/均价</view>
						</view>
						<view class="action-li">
							<view class="name">委量/成交</view>
						</view>
						<view class="action-li">
							<view class="name">状态</view>
						</view>
						<view class="action-li">
							<view class="name">操作</view>
						</view>
					</view>
					<view class="info-info-wrapper">
						<view class="info-info-list">
							<view class="value1">
								<view class="v1">宁波能源</view>
								<view class="v2"> 18:05:05</view>
							</view>
							<view class="value1">
								<view class="v1">3.680</view>
								<view class="v2">0.000</view>
							</view>
							<view class="value1">
								<view class="v1">1400.00</view>
								<view class="v2">0.00</view>
							</view>
							<view class="value1">
								<view class="v1">卖出</view>
								<view class="v2">未报</view>
							</view>
							<view class="value1">
								<view class="v3">撤</view>
							</view>
						</view>
						<!-- <view class="empty">
							<image src="../../static/trade/blocktrading/empty.png" mode=""></image>
							<view class="label">~暂无数据~</view>
						</view> -->
					</view>
				</view>
			</view>
			<view v-if="activeTabIndex == 3">
				<view class="ccheck-wrapper flexs">
					<view class="ccheck-left"><text>人民币账户</text><uni-icons type="loop" size="15"
							color="#999999"></uni-icons></view>
					<view class="ccheck-right"><text>全景资产</text><uni-icons type="right" size="15"
							color="#08377D"></uni-icons></view>
				</view>
				<view class="cmodel-wrapper">
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
							<view class="label-icon">国债<uni-icons type="right" size="10" color="#FEA330"></uni-icons>
							</view>
						</view>
						<view class="value">0.00</view>
					</view>
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
						</view>
						<view class="value">0.00</view>
					</view>
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
						</view>
						<view class="value">0.00</view>
					</view>
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
						</view>
						<view class="value">0.00</view>
					</view>
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
						</view>
						<view class="value">0.00</view>
					</view>
					<view class="cmodel-model-li">
						<view class="label">
							<view class="label-label">总资产</view>
						</view>
						<view class="value">0.00</view>
					</view>
				</view>
			
			<view class="info-wrapper">
				<view class="title">
					<view class="title-title">京沪深</view>
					<view class="title-icon"></view>
				</view>
				<view class="action-wrapper">
					<view class="action-li">
						<view class="name">股票/市值</view>
						<image src="../../static/analysis/analysis/icon6.png" class="label-ud" mode=""></image>
					</view>
					<view class="action-li">
						<view class="name">可用/持仓</view>
					</view>
					<view class="action-li">
						<view class="name">成本/现价</view>
					</view>
					<view class="action-li">
						<view class="name">持仓盈亏</view>
					</view>
				</view>
				<view class="info-info-wrapper">
					<view class="empty">
						<image src="../../static/trade/blocktrading/empty.png" mode=""></image>
						<view class="label">~暂无数据~</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['买入', '卖出', '撤单', '持仓', '委托成交'],
				activeTabIndex: 0, // 当前激活的tab索引
			}
		},
		onLoad(options) {
           this.activeTabIndex = options.index
		   console.log(this.activeTabIndex)
		},
		methods: {

		}
	}
</script>


<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F6F6FB;
	}

	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		background-color: #fff;

		.navigate {
			color: rgb(0, 0, 0);
			height: 44px;
			height: calc(44px + constant(safe-area-inset-top));
			height: calc(44px + env(safe-area-inset-top));
			padding: 7px 3px;
			padding-top: calc(7px + constant(safe-area-inset-top));
			padding-top: calc(7px + env(safe-area-inset-top));
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			overflow: hidden;
			position: relative;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			box-sizing: border-box;
			z-index: 998;
			-webkit-transition-property: all;
			transition-property: all;

			.left {
				font-weight: 500;
				margin: 0 4rpx;
			}

			.center {
				width: 548rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -274rpx;
				text-align: center;
				color: #262626;
				display: flex;
				justify-content: center;
				align-items: center;

				.center-title-wrpper {
					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #262626;
					}

					.subtitle {
						font-size: 20rpx;
						color: #999999;
					}
				}

				.center-icon {
					position: relative;
					left: 5rpx;
					top: 2rpx;
				}
			}

			.right {
				margin-right: 30rpx;
			}
		}
	}

	.center-warpper {
		background: #fff;
		margin-bottom: 27rpx;

		.ctype-wrapper {
			padding: 0 33rpx;
			box-sizing: border-box;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;

			.ctype-type-li {
				font-size: 30rpx;
				color: #08377D;
				position: relative;
				font-weight: 600;
			}

			.active:after {
				content: '';
				width: 32rpx;
				height: 5rpx;
				border-bottom: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;

			}
		}

		.ccheck-wrapper {
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 33rpx;
			font-size: 24rpx;
			color: #999999;
			border-bottom: 1rpx solid #e5e5e5;

			.ccheck-left {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.ccheck-right {
				display: flex;
				align-items: center;
				gap: 10rpx;
				color: #08377D;
			}
		}

		.cmodel-wrapper {
			padding: 27rpx 33rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.cmodel-model-li {
				width: 33%;
				font-weight: bold;
				font-size: 32rpx;
				color: #262626;
				margin-bottom: 60rpx;

				.label {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 28rpx;
					color: #999999;
					margin-bottom: 23rpx;

					.label-icon {
						width: 100rpx;
						height: 32rpx;
						background: rgba(254, 163, 48, 0.2);
						border-radius: 10rpx;
						font-size: 20rpx;
						color: #FEA330;
						justify-content: center;
						display: flex;
						align-items: center;
						gap: 1rpx;
					}
				}
			}
		}
	}

	.info-wrapper {
		background-color: #fff;

		.title {
			padding: 0 33rpx 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;

			.title-title {
				width: 100rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #262626;
				position: relative;
				margin-right: 30rpx;
			}

			.title-title:after {
				content: '';
				width: 32rpx;
				height: 5rpx;
				background: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;
			}

			.title-icon {
				position: relative;
			}

			.title-icon::after {
				content: '';
				position: absolute;
				right: 0rpx;
				top: 0;
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #999999;
			}
		}

		.action-wrapper {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E5E5E5;
			border-top: 1rpx solid #E5E5E5;
			padding: 0 33rpx;

			.action-li {
				height: 71rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;

				image {
					height: 23rpx;
					width: 23rpx;
					margin-right: 10rpx;
				}

				.label-ud {
					height: 19rpx;
					width: 13rpx;
					margin-left: 10rpx;
				}
			}
		}

		.info-info-wrapper {
			min-height: 400rpx;
		}

		.empty {
			width: 244rpx;
			height: 113rpx;
			margin: 100rpx auto;
			text-align: center;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.center-warppera{
		background: #fff;
		margin-bottom: 27rpx;
		padding-bottom: 20rpx;
		.ctype-wrapper{
			padding: 0 33rpx;
			box-sizing: border-box;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			.ctype-type-li{
				font-size: 28rpx;
				color: #999999;
				position: relative;
			}
			.active:after{
				content: '';
				width: 32rpx;
				height: 5rpx;
				background: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;
				
			}
		}
		.type-list{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 24rpx auto 0;
			.type{
				width: 171rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 24rpx;
				color: #262626;
				background: #FFFFFF;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				border: 1px solid #E5E5E5;
			}
			.active{
				background-color: rgba(8, 55, 125, 0.02);
				color: #08377D;
			}
		}
	}
	.info-wrapper{
		background-color: #fff;
		.title{
			padding: 0 33rpx 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			.title-title{
				width: 100rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #262626;
				position: relative;
				margin-right: 30rpx;
			}
			.title-title:after{
				content: '';
				width: 32rpx;
				height: 5rpx;
				background: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;
			}
			.title-icon{
				position: relative;
			}
			.title-icon::after{
				content: '';
				position: absolute;
				right: 0rpx;
				top: 0;
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #999999;
			}
		}
		.action-wrapper{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E5E5E5;
			border-top: 1rpx solid #E5E5E5;
			padding: 0 33rpx;
			.action-li{
				height: 71rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				
				image{
					height: 23rpx;
					width: 23rpx;
					margin-right: 10rpx;
				}
				.label-ud{
					height: 19rpx;
					width: 13rpx;
					margin-left: 10rpx;
				}
			}
		}
		.info-info-wrapper{
			min-height: 400rpx;
			.info-info-list{
				padding: 10rpx 33rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #262626;
				line-height: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #e5e5e5;
				.value1{
					
				}
				.v3{
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 10rpx;
					border: 1rpx solid #e5e5e5;
				}
			}
		}
		.empty {
			width: 244rpx;
			height: 113rpx;
			margin: 100rpx auto;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.listtablist_A{
		width: 90%;
		height: 500rpx;
		float: left;
		margin-left: 5%;
	}
	.lieft_list{
		width: 60%;
		height: 100%;
		float: left;
	}
	.bksx{
		width: 88rpx;
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1px solid #EA0E00;
		float: left;
		text-align: center;
		line-height: 65rpx;
		font-size: 24rpx;

	}
	.bksxb{
		width: 88rpx;
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1px solid #08377D;
		float: left;
		text-align: center;
		line-height: 65rpx;
		font-size: 24rpx;
	
	}
	.bksxa{
		width:256rpx;
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1px solid #EA0E00;
		float: left;
		margin-left: 30rpx;
		text-align: center;
		line-height: 65rpx;
		font-size: 24rpx;
	}
	.bksxaa{
		width:256rpx;
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1px solid #08377D;
		float: left;
		margin-left: 30rpx;
		text-align: center;
		line-height: 65rpx;
		font-size: 24rpx;
	}
	.lieft_right{
		width: 40%;
		height: 100%;
		float: left;
	}
</style>